<template>
  <div class="title">
    <span class="mark" @click="goBack()"></span>
    {{caption}}
  </div>
</template>

<script>
    export default {
        props: {
            caption: {
                type: String,
                default: ''
            }
        },

        methods: {
            goBack: function () {
                this.$router.go(-1)
            }
        }
    }
</script>

<style lang="scss" scoped>

  .title{
    background-color: #e54847;
    line-height: 50px;
    height: 50px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    position: relative;

  .mark{
    width: 13px;
    height: 13px;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform:rotate(45deg);

    cursor: pointer;
  }
  }
</style>